<template>
  <div>
    <div class="work">
      <!-- <Row span="24" class="basicCase">
        <Col span="18">
          <div class="caseTit">
            <span> <span v-if="!today">今日</span>基本概况</span>
            <span v-if="today">（时间：{{getLocalDate(value3)}}）</span>
          </div>
        </Col>
        <Col span="6">
            <div class="caseDate" style="background:pink">
            <div class="borderGray">
              <DatePicker
                :open="open1"
                confirm
                type="date"
                :options="options"
                @on-change="handleChange1"
                @on-clear="handleClear1"
                @on-ok="handleOk1">
                <p @click="handleClick1">
                  <span style="color:#1088FF;">查看往期</span>
                  <img src="~@/assets/dateLeft.png" alt="" style="float:right;margin-left:6px;margin-top:1px">
                </p>
              </DatePicker>
            </div>
              <div class="borderGray" @click.prevent="subDate"><Icon type="ios-arrow-back" size="18"/></div>
              <div class="borderGray"  @click.prevent="todayDate()">今日</div>
              <div class="borderGray"  @click.prevent="addDate" v-if="btnShow"><Icon type="ios-arrow-forward"  size="18"/></div>
              <div class="borderGray"  v-else><Icon type="ios-arrow-forward"  size="18" color="#eee"/></div>
            </div>
        </Col>
      </Row> -->
      <Modal
        v-model="show"
        title="充值"
        width="680px"
        :footer-hide="true"
        :closable="false"
        :mask-closable="false"
     >
      <Form ref="formRole" :model="formRole" :rules="rules"  :label-width="110">
        <FormItem label="商户名称">
          <Input v-model.trim="formRole.name"  style="width: 300px" disabled/>
        </FormItem>
         <FormItem label="账户余额(元)">
          <Input v-model.trim="formRole.restMoney" style="width: 300px" disabled/>
        </FormItem>
         <FormItem label="充值方式">
          <Input v-model.trim="formRole.payWay" style="width: 300px" disabled/>
        </FormItem>
        <FormItem label="银行卡号" prop="bank_card">
          <Input v-model.trim="formRole.bank_card"  @on-change="changeCard" placeholder="请输入银行卡号" style="width: 300px" :maxlength="20" clearable/>
        </FormItem>
        <FormItem label="汇款公司" prop="company">
          <Input v-model.trim="formRole.company"  placeholder="请输入汇款公司" style="width: 300px" :maxlength="25" clearable/>
        </FormItem>
        <FormItem label="充值金额(元)" prop="amount">
          <Input v-model.trim="formRole.amount"  placeholder="请输入充值金额" style="width: 300px" :maxlength="7" clearable/>
        </FormItem>
        <FormItem label="上传凭证" prop="image">
           <Upload
            :action = "uploadUrl"
            :show-upload-list="false"
            name="uploadFile"
            :before-upload="handleUpload"
            :on-success="handleSuccess"
            accept="image/*"
            :on-error='handleError'
            v-model="formRole.image"
            :headers="headers"
            >
            <div class="picture">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <Icon type="ios-add" size="80" v-else></Icon>
            </div>
          </Upload>
           <p v-if="imageUrl" style="cursor:pointer;color:#2d8cf0;font-size:14px;" @click="visible = true;">查看图片</p>
        </FormItem>
      <div style="text-align:right">
        <Button @click="show = false;imageUrl='';resetValidate('formRole');" style="margin-right:2px">取消</Button>
        <Button type = "primary" @click="submitModal">确定</Button>
      </div>
      </Form>
      </Modal>
      <Modal title="查看图片" v-model="visible"  class="viewImg" :footer-hide="true">
        <img :src="imageUrl" v-if="visible">
        <div style="text-align:right">
        <Button type = "primary" @click="visible =false" >关闭</Button>
      </div>
      </Modal>
      <div class="homeTit">
        <h3>今日信息概况</h3>
      </div>
       <div class="cardWrapper">
          <Card :bordered="false" :dis-hover="true" :padding="0"  style="position:relative;">
              <p slot="title" class="tit">
                今日信息概况
                <Button  size ='large' type = "primary"  @click="show =true" style="position:absolute;right:0;top:10px">去充值</Button>
              <!-- <span style="float:right;color: #2D8CF0;cursor:pointer" @click="show =true">去充值</span> -->
              </p>
              <Row span="24">
                <!-- <Col span="6" class="cardCol">
                  <h6>使用项目条数</h6>
                  <p>123</p>
                </Col> -->
                <Col span="6" class="cardCol">
                  <h6>总充值金额</h6>
                  <p>{{toYuan(userInfo.total_amount)}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>已使用金额</h6>
                  <p>{{toYuan(userInfo.pay_amount)}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>账户余额</h6>
                  <p>{{toYuan(userInfo.amount)}}</p>
                </Col>
                <Col span="6" class="cardCol">
                  <h6>待审金额</h6>
                  <p>{{toYuan(userInfo.frozen_amount)}}</p>
                </Col>
              </Row>
            </Card>
        </div>
      <div class="homeTit">
        <h3 style="margin-top:20px">基本信息</h3>
      </div>
      <!-- <div class="cardWrapper">
        <Card :bordered="false" :dis-hover="true" :padding="0">
            <p slot="title" class="tit">账户信息</p>
            <Row span="24">
              <Col span="6" class="cardCol">
                <h6>账户余额(元)</h6>
                <p>123456</p>
              </Col>
              <Col span="6" class="cardCol">
                <h6>已使用金额(元)</h6>
                <p>123456</p>
              </Col>
              <Col span="6" class="cardCol">
                <h6>总充值金额(元)</h6>
                <p>34567</p>
              </Col>
               <Col span="6" class="cardCol">
                <h6>冻结金额(元)</h6>
                <p>34567</p>
              </Col>
            </Row>
          </Card>
        </div> -->
        <div class="cardWrapper cardWrapper1">
          <Card :bordered="false" :dis-hover="true" :padding="0">
              <p slot="title" class="tit">机构信息</p>
              <Row span="24">
                <Col span="8" class="cardCol">
                  <h6>机构全称</h6>
                  <p>{{userInfo.name}}</p>
                </Col>
                <Col span="8" class="cardCol">
                  <h6>负责人</h6>
                  <p>{{userInfo.contact}}</p>
                </Col>
                <Col span="8" class="cardCol">
                  <h6>负责人电话</h6>
                  <p>{{userInfo.phone}}</p>
                </Col>
                <!-- <Col span="6" class="cardCol">
                  <h6>负责人邮箱</h6>
                  <p>271731191@qq.com</p>
                </Col> -->
              </Row>
            </Card>
        </div>

    </div>
  </div>
</template>

<script>
import listMixin from '../../mixin/list'
import CountTo from "../../template/count-to"
import base64 from 'js-base64'
 import {zeroType,bankType} from '../../../js/rules'
let Base64 = base64.Base64
let Authorization = 'Basic '+Base64.encode(sessionStorage.getItem('tokenId')+':'+sessionStorage.getItem('token'))
export default {
  mixins:[listMixin],
  components: {
    CountTo
  },
  data() {
    return {
      tag: {
        title: "工作台",
        path: "/work/index/index"
      },
      show:false,
      visible:false,
      userInfo: {},
      formRole:{},
      uploadUrl: `${this.$http.defaults.baseURL}/merchant/photo`,
      imageUrl:'',
      rules:{
        bank_card: [
          { required: true, message: '请输入正确的银行卡号', trigger: 'blur',validator:bankType}
        ],
        company: [
          { required: true, message: '请输入汇款公司', trigger: 'blur'}
        ],
        amount: [
          { required: true, message: '请输入正整数', trigger: 'blur',validator:zeroType}
        ],
        image: [
          { required: true, message: '请选择图片', trigger: 'blur' }
        ],
      },
      headers:{
        "ua":'1;1.0.0;API0;web',
        "Authorization":Authorization
      },
      today:false,
      open1: false,
      btnShow:false,
      options:{
        disabledDate (date) {
          return date && date.valueOf() > Date.now() ;
        }
      },
      value1:'',
      value3:(new Date().getTime())
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    changeCard(){
    //  this.formRole.bank_card=this.formRole.bank_card.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')
    },
    toYuan(money) {
      if (money) {
        return (money / 100).toFixed(2);
      } else {
        return 0;
      }
    },
    getUserInfo() {
      this.$get("/merchant/info").then(res => {
        if (res.code === 0) {
          this.userInfo = res.data;
          this.formRole.restMoney = this.toYuan(this.userInfo.amount);
          this.formRole.payWay = '银行汇款';
          this.formRole.name = this.userInfo.name
        }
      });
    },
    resetValidate(name) {
      this.$refs[name].resetFields();
    },
    handleUpload(file){
        console.log(file,'file');
        this.file = file;
        return true;
      },
      handleSuccess (res, file) {
        console.log(res,'res')
        this.formRole.image = res.data.url;
        this.imageUrl =  res.data.url;
        // console.log(this.formRole.image);
        this.$refs.formRole.validateField('image');
        this.$Message.success('上传成功')
      },
      handleError(error){
        console.log(error,'error');
      },
    submitModal(){
      console.log(111);
      this.$refs.formRole.validate((valid) => {
        if(valid){
          let data = {
            amount:this.formRole.amount,
            image:this.formRole.image,
            bank_card:this.formRole.bank_card,
            company:this.formRole.company
          }
          this.$post('/merchant/pay',data).then(res => {
            console.log(res,'充值');
            if(res.code == 0){
              // this.$Message.success(res.msg);
                this.show = false;
                this.imageUrl='';
                this.resetValidate('formRole');
                this.formRole.bank_card = '';
                this.formRole.company = '';
                this.formRole.amount = '';
                this.$Message.success("充值完成");
                this.getList(this.url)
            }else{
              this.$Message.error(res.msg);
              this.show = false;
              this.resetValidate('formRole');
            }
          })

        }

      })
      },
    handleClick1 () {
        this.open1 = !this.open1;
      },
      handleChange1 (date) {
        this.value1 = new Date(date);
      },
      handleClear1 () {
        this.open1 = false;
      },
      handleOk1 () {
        this.open1 = false;
        this.value3 = this.value1;
        let today = new Date().getTime();
        let todayString = new Date(this.getLocalDate(today)).getTime();
        let dateString = new Date(this.getLocalDate(this.value3)).getTime();
        if(todayString == dateString){
          this.today = false;
        }else{
          this.today = true;
        }
        // console.log(this.value3,'value3');
        this.getBasicData(this.value3)
      },
      getBasicData(date){

        // this.$post('/bkworkbench/today/data',{date:date})
        //   .then(res => {
        //     // console.log(res.data,'基本情况');
        //     let data = res.data;
        //     if(data.beforeLoanCount < 0){
        //       this.active = true
        //     }else{
        //       this.active = false
        //     }
        //     this.basicData = data;
        //     if(data.applyDateTime){
        //       this.basicData.applyDateTime =  this.getLocalDate(data.applyDateTime)
        //     }else{
        //       this.basicData.applyDateTime = this.getLocalDate(new Date(this.value3).getTime()-86400000*6);
        //     }
        //   })
      },
      addDate(){ //加日期
        let today = new Date().getTime();
        let todayString = new Date(this.getLocalDate(today)).getTime();
        let dateString = new Date(this.getLocalDate(this.value3)).getTime();
        this.value3 = dateString+86400000;
        if(this.value3 < todayString){
          this.today = true;
          this.btnShow = true;
          this.getBasicData(new Date(this.getLocalDate(this.value3)))
        }else if(this.value3  == todayString){
          this.today = false;
          this.btnShow = false;
          this.getBasicData()
        }
      },
      subDate(){ //减日期
        this.value3 = this.value3 - 86400000;
        this.today = true;
        this.btnShow = true;
        // console.log(this.getLocalDate(this.value3));
        this.getBasicData(new Date(this.getLocalDate(this.value3)))
      },
      todayDate(){ //今日
        this.value3 = new Date().getTime();
        this.today = false;
        this.btnShow = false;
        this.getBasicData();
      },
      getLocalDate(time) {//时间戳转日期
        if(time){
          const date = new Date(time);
          const year = date.getFullYear()
          const month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1
          const day = date.getDate() < 10 ? '0'+date.getDate() : date.getDate()
          const t1 = [year, month, day].join('-')
          return `${t1}`
        }else{
          return '—'
        }
      },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.list-btn {
  margin-bottom: 5px;
  margin-right: 5px;
  display: inline-block;
}
.refresh-btn {
  float: right;
}
  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
  .homeTit{
    h3{
      color:#333;
      padding-left:14px;
      font-size:18px;
      border-left:5px solid #FE9625;
      margin-bottom:20px;
    }
  }
  .basicCase{
      background: #fff;
      margin:10px 0;
      padding: 23px 0;
      color:#333;
    .caseTit{
        padding-left:14px;
        font-size:16px;
        border-left:5px solid #FE9625;
        span:nth-of-type(1){
          font-size:18px;
          color:#515A6E;
          font-weight:600;
        }
        span:nth-of-type(2){
          font-size:16px;
          color:#FE9625;
          margin-left:8px;
        }
      }
      .caseDate{
        .borderGray{
          height:33px;
          border: 1px solid #E4E4E4;
          text-align: center;
          line-height: 33px;
        }
        >div{
        float: left;
        &:nth-of-type(1){
          width:100px;
          margin-right:6px;
          font-size:14px;
        }
        &:nth-of-type(2),&:nth-of-type(4){
          width:28px;
          font-size:14px;
          cursor: pointer;
        }
        &:nth-of-type(3){
          width:48px;
          margin:0 10px;
          color:#656C7F;
          font-size:14px;
          cursor: pointer;

        }
      }
      }
    }
    .cardWrapper{
      width:90%;
      padding:0 18px;
      margin-bottom:10px;
      background: #fff;
      .tit{
        font-size:16px;
        color:#515A6E;
        span{
          font-size:14px;
          color:#515A6E;
          margin-left:18px;
          font-weight:500;
        }
      }
      /deep/ .ivu-card-head {
        border-bottom: 1px solid #F0F0F0;
        padding: 16px 16px 16px 0;
        line-height: 1;
      }
      .cardCol{
        /* text-align: center; */
        h6{
          font-size:14px;
          color:#515A6E;
          margin:19px 0 13px;
          font-weight:normal;
        }
        p{
          font-size:18px;
          color: #2D8CF0;
          margin-bottom:24px;
          font-weight:600;
          span:nth-of-type(1){
            color:#515A6E;
            padding-right:6px;
            border-right:2px solid #515A6E;
          }
          span:nth-of-type(2){
            margin-left:6px;
          }
        }
        .redCol{
          color:#FC6665;
          span:nth-of-type(1){
            color:#FC6665
          }
        }
        .greenCol{
          color:#19be6b
        }
      }
      color:#333;
    }
   .cardWrapper1{
      .cardCol{
         p{
           font-size:15px;
         }
      }
   }
  /deep/ .ivu-input[disabled]{
  color:#666;
}
.viewImg{
  overflow: auto;
  img{
    width:100%;
  }
}
</style>
